<template>
  <div class="container">
    <header>
      <div class="left">
        <span @click="back">
          <i></i>
        </span>
        <h6>离线中心</h6>
        <span>
          <i></i>
        </span>
      </div>
    </header>

    <!-- 要循环的 -->
    <!-- 视频列表 -->
        <div class="viedolists">

            <!-- <div class="title">视频列表</div> -->

            <!-- 视频 -->
            <div class="datalists">
                <!-- 要循环的 -->
                <div class="contentlists" v-for="(item, index) in down" :key="index">
                    <div class="name" @click="govideo(item.id)">
                        <h6>
                            {{ item.title }}
                        </h6>
                        <h6>
                           {{item.duration}}
                        </h6>

                    </div>
                    <div class="down" @click="del(item.id)">
                        <i></i>
                    </div>
                </div>
            </div>
        </div>
  </div>
</template>
<script>
import router from '@/router';
import { reactive, toRefs } from '@vue/reactivity';
export default {
  setup() {

  let arry = reactive({
    down:[]
  })

    let back =()=>{
        router.push({
            path:"/my"
        })
    }

    arry.down = JSON.parse(window.localStorage.getItem("readydown"))
    console.log(arry.down);
    
    let del = (id)=>{
      console.log(id);
      let Index=arry.down.findIndex((item)=>item.id == id)
      console.log(Index);
      if(Index != -1){
        arry.down.splice(Index, 1)

        window.localStorage.setItem("readydown",JSON.stringify(arry.down))
      }
    }

    let govideo = (id)=>{
      let index = arry.down.findIndex((item) => {
        return item.id == id;
      });
      console.log(index);
      //点击跳转后传index值
        router.push({
            path: "/television",
            query: {
                "id": index
            }
        })
    }

    return {
        back,
        ...toRefs(arry),
        del,
        govideo
       
    }
  },
};
</script>
<style lang="scss" scoped>
@import "../assets/css/base.css";
header {
  display: flex;
  align-items: center;
  position: sticky;
  top: 0px;
  background-color: #fff;
  z-index: 100;
  border-bottom: 1px solid #f1f1f1;
}
header .left {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  h6 {
    // margin-left: 50px;
    font-size: 15px;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }
}
header .left span:nth-child(1) i {
  display: block;
  background-image: url(../assets/img/下载.png);
  width: 48px;
  height: 46px;
  background-size: 18px 18px;
  background-repeat: no-repeat;
  background-position: 20px 13px;
}
header .left span:nth-child(3) i {
  display: block;
  // background-image: url(../assets/img/下载.png);
  width: 48px;
  height: 46px;
  // background-size: 18px 18px;
  // background-repeat: no-repeat;
  // background-position: 20px 13px;
}
.viedolists {

    display: flex;
    flex-direction: column;
    // margin-top: 20px;

    .title {
        padding: 0px 15px;
        background-color: #fff;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        height: 42px;
        line-height: 42px;
        border-bottom: 1px solid #dedede;
    }

    .contentlists::before {
        display: block;
        content: "";
        width: 15px;
        height: 15px;
        background-image: url(../assets/img/icon-play.jpg);
        background-size: 15px 15px;
        position: absolute;
        left: 15px;
        border-radius: 3px;
    }

    .datalists {
        background-color: #fff;

        .contentlists {
            padding-right: 15px;
            margin-left: 45px;
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
            border-bottom: 1px solid #ebebeb;
            align-items: center;

            .name {
                display: flex;
                flex-direction: column;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                h6:nth-child(1) {
                    font-size: 14px;
                    color: #3c3c3c;
                    height: 25px;
                    line-height: 25px;
                    padding-top: 5px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    
                }

                h6:nth-child(2) {
                    font-size: 12px;
                    color: #8f8e96;
                    height: 21px;
                    line-height: 21px;
                    margin-bottom: 10px;
                }
            }

            .down {
                i {
                    display: flex;
                    width: 12px;
                    height: 12px;
                    background-image: url(../assets/img/close.6dfeaa4.png);
                    background-size: 12px 12px;
                }
            }
        }

    }

}
</style>